<template>
	<view class="content">
		<view class="l-fixed">
			<!-- #ifndef MP-WEIXIN -->
			<view class="l-status"></view>
			<!-- #endif -->

			<!-- l-head -->

			<view class="l-head">
				<view class="l-search">
					<image class="l-icon-search" src="../../static/l-icon-search.png" mode=""></image>
					<input type="text" class="l-search-input" v-model="search_value" placeholder="精彩热搜：金光布袋戏《羽国志异》"
						placeholder-class="l-holder" />
				</view>
				<button style="background-color: #007AFF;height: 60rpx;line-height: 60rpx;font-size: 20rpx;width: 75rpx;" @tap="search_book()">搜索</button>
			</view>
		</view>

		<view class="l-placeholder"></view>

		<view class="l-body">

			<!-- l-swiper -->

			<swiper class="l-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500"
				indicator-color="var(--c-bg-2)" indicator-active-color="#41bdb2" circular @tap="$toast(`轮播图`)">
				<swiper-item>
					<view class="l-swiper-item">
						<image class="l-carousel-img" :src="img" mode="aspectFill"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="l-swiper-item">
						<image class="l-carousel-img" :src="img" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>

			<!-- l-madin -->
			<view class="l-main">

				<view class="l-h3">
					<text class="l-h3-title">最新推荐</text>
				<!-- 	<view class="l-h3-more" @tap="$toast(`../search/search?type=1&value=1`)">查看全部<image class="l-icon-more"
							src="../../static/l-icon-more.png" mode="widthFix"></image>
					</view> -->
				</view>
				<view class="l-dl" v-for="(book,i) in datas" :key="i" @tap="navtoDetail(book.Id)" @scrolltolower="scroll">
					<view>
						<image class="l-dt" :src="book.photo" mode="aspectFill"></image>
					</view>
					<view class="l-dd">
						<view class="l-dd-title">
							{{book.title}}
						</view>
						<view class="l-dd-content">
							{{book.synopsis}}……
						</view>
						<view class="l-dd-footer">
							<!-- <image class="l-dd-img" lazy-load src="../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../static/logo.png" mode="aspectFill"></image>
							 -->
							<text style="font-size: 30rpx;">类型：{{book.type}}</text>
						</view>
					</view>
				</view>
				<view style="text-align: center;font-size: 30rpx;color: #F1F1F1;margin-top: 15rpx;">
					已加载全部
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getNewBooks,searchBook } from "../../utils/api.js"
	import { setStore, getStore } from "../../store/store.js"
	export default {
		data() {
			return {
				title: 'Hello',
				img: `../../static/152b74dd6eb4c583fd8921a3f634b5dc.jpg`,
				bookimg: `../../static/152b74dd6eb4c583fd8921a3f634b5dc.jpg`,
				datas: [],
				page: 1,
				search_value: ''
			}
		},
		onLoad() {
			this.getNew();
		},
		onPullDownRefresh() {
		    this.getNew()
		    setTimeout(function () {
		        uni.stopPullDownRefresh();
		    }, 1000);
		},
		onReachBottom: function() {			
			getNewBooks(this.page, (data) => {
				for (var i = 0; i < data.data.length; i++) {
					this.datas.push(data.data[i]);
				}
				this.page++;
				
			});
		},
		methods: {
			getNew(){
				uni.showLoading({
					title: '加载中...',
				})
				getNewBooks(this.page, (data) => {
					var obj = data.data;
					var arr = [];
					for ( var i in obj ){
						arr.push(obj[i]);
					}
					this.datas = arr;
					this.page++;
					if (this.datas.length<1){
						this.page = 1;
					}
				});
				setTimeout(function () {
				    uni.hideLoading();
				}, 500);
				// uni.hideLoading();
			},
			search_book() {
				if ( this.search_value == '' ){
					uni.showToast({
						title: '搜索内容不能为空!',
						icon: 'none'
					})
					return;
				}
				searchBook(this.search_value, (data)=>{
					this.datas = data.data;
				})
			},
			navtoDetail(id) {
				uni.navigateTo({
					url: '/pages/detail/detail?bookid='+id
				})
			}
		}
	}
</script>

<style>
	/* l-head */
	.l-head {
		margin-top: 15rpx;
	}

	.l-nav-bookrack {
		font-size: 30rpx;
	}


	/* l-main */

	.l-main {
		padding-bottom: 32rpx;
	}

	.l-h3 {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.l-h3-title {
		font: bold var(--f-size-5) normal;
	}

	.l-h3-more {
		display: flex;
		align-items: center;
		color: var(--c-bg-2);
	}

	.l-dl {
		margin-top: 32rpx;
		display: flex;
		width: 100%;
		height: 224rpx;
	}

	.l-dt {
		width: 160rpx;
		height: 100%;
		border-radius: 10rpx;
		margin-right: 24rpx;
	}

	.l-dd {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.l-dd-title {
		color: var(--c-txt-3);
		font: var(--f-size-3) normal;
	}

	.l-dd-content,
	.l-dd-footer {
		color: var(--c-txt-2);
		font: var(--f-size-2)/var(--f-size-4) normal;
	}

	.l-dd-content {
		width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.l-dd-footer {
		display: flex;
		align-items: center;
	}

	.l-dd-view-footer {
		width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		-webkit-line-clamp: 2;
	}

	.l-dd-img {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-right: 6rpx;
	}
</style>
